<%--
  Created by IntelliJ IDEA.
  User: 陈志峰
  Date: 2020/4/3
  Time: 13:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>【定制游】个性旅游定制平台，旅行定制专家</title>
    <link href="${pageContext.request.contextPath}/css/customize/custom.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/js/jquery-3.4.1.min.js"></script>
    <link href="${pageContext.request.contextPath}/layui/css/layui.css" rel="stylesheet" media="all">
    <link href="${pageContext.request.contextPath}/layui/css/modules/laydate/default/laydate.css" rel="stylesheet" media="all">
    <script src="${pageContext.request.contextPath}/layui/layui.all.js"></script>
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
    <script src="${pageContext.request.contextPath}/layui/lay/modules/rate.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/dist/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/dist/css/bootstrap.min.css">
    <script src="${pageContext.request.contextPath}/dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="q_header q_header_package">
    <div class="mymain">
        <div class="q_header_main" data-hfchannel="package" data-hffile="header_main">
            <div class="q_header_logo"><a href="" target="_top" hidefocus="on">
                <img src="${pageContext.request.contextPath}/images/logo.svg"></a></div>
            <div class="p_nav">
                <div class="p_nav_ct">
                    <ul>
                        <li class="deactve home"><a href="/index.jsp" hidefocus="on"
                                                    wc-clk="index">度假首页</a></li>
                        <li class="deactve fh agio"><a href="" target="_blank"
                                                       wc-clk="fh">自由行</a><i class="icon"></i></li>
                        <li class="deactve surrounding"><a href=""
                                                           hidefocus="on" wc-clk="around">周边游</a></li>
                        <li class="deactve c2b"><a href="/custom/custom" hidefocus="on"
                                                   target="_blank" wc-clk="c2b">包团·定制</a><i class="icon"></i></li>
                    </ul>
                </div>
            </div>
            <div class="q_header_tnav">
                <ul>
                    <c:if test="${empty loginCustomer}">
                        <li id="__loginInfo_u__" class="q_header_username">
                            <span>请</span>
                            <a id="__headerInfo_login__"
                               href="/customer/login.jsp"
                               hidefocus="on" rel="nofollow">登录</a>
                        </li>
                        <li id="__loginInfo_r__" class="q_header_register">
                            <span>或</span>
                            <a id="__headerInfo_reg__"
                               href="/customer/register.jsp"
                               hidefocus="on"
                               rel="nofollow">免费注册</a></li>
                    </c:if>
                    <c:if test="${not empty loginCustomer}">

                        <li  class="q_header_username">
                            <span>欢迎您</span>
                            <a href=""
                               hidefocus="on" rel="nofollow">${loginCustomer.customerName}</a>
                        </li>
                        <li  class="q_header_register">
                            <span>     </span>
                            <a href="/customer/out"
                               hidefocus="on"
                               rel="nofollow" class="out">退出</a></li>

                    </c:if>
                </ul>
            </div>
        </div>
    </div>
</div>


<div class="c2b-index-wrap">
    <div class="innerWrap">
        <div class="imgWrap">
            <div class="img">
                <img src="${pageContext.request.contextPath}/images/top1.png" alt>
            </div>
            <div class="img">
                <img src="${pageContext.request.contextPath}/images/top2.png" alt>
            </div>
            <div class="img">
                <img src="${pageContext.request.contextPath}/images/top3.png" alt>
            </div>
            <div class="img">
                <img src="${pageContext.request.contextPath}/images/top4.png" alt>
            </div>
        </div>
        <div class="container">
            <div class="formWrap">
                <div class="left">
                    <div class="customType">
                        <div data-v-48aac67a class="radio-wrap">
                            <div data-v-48aac67a class="radio-box">
                                    <span data-v-48aac67a class="radio on">
                                    </span>
                                <input data-v-48aac67a type="radio" class="input-radio">私人定制
                            </div>
                            <div data-v-48aac67a class="radio-box">
                                    <span data-v-48aac67a class="radio">
                                    </span>
                                <input data-v-48aac67a type="radio" class="input-radio">公司定制
                            </div>
                        </div>
                    </div>
                    <div class="message">
                        <div class="title">
                                <span class="leftTitle">
                                    快速定制
                                </span>
                            <span class="titleItem active">
                                    <i class="icon steps0"></i>
                                    基本信息
                                </span>
                            <span class="titleItem active">
                                    <i class="icon steps1"></i>
                                    特色定制
                                </span>
                            <span class="titleItem active">
                                    <i class="icon steps2"></i>
                                    联系人信息
                                </span>
                        </div>
                        <div class="indexForm infoForm">
                            <form class="el-form">
                                <div class="el-form-item itemRow is-required">
                                    <label class="el-form-item__label" style="width: 145px;">
                                        出游性质:
                                    </label>
                                    <div class="el-form-item__content" style="margin-left: 145px;">
                                        <div class="custom">
                                            <div class="customOn">私人定制</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="el-form-item itemRow is-required">
                                    <label class="el-form-item__label" style="width: 145px;">
                                        出发地：
                                    </label>
                                    <div class="el-form-item__content" style="margin-left: 145px;">
                                        <div class="el-select">
                                            <div class="el-input el-input--suffix">
                                                <input type="text" placeholder="请填写出发地" class="el-input__inner start">
                                                <span class="el-input__suffix">
                                                    <span class="el-input__suffix-inner">
                                                        <i class="el-select__caret el-input__icon el-icon-"></i>
                                                    </span>
                                                </span>
                                            </div>
                                        </div>

                                    </div>

                                </div>
                                <div class="el-form-item itemRow is-required" id="destination">
                                    <label for="destination" class="el-form-item__label" style="width: 145px;">
                                        目的地：
                                    </label>
                                    <div class="el-form-item__content" style="margin-left: 145px;">
                                        <div class="el-input">
                                            <input type="text" placeholder="请选择目的地" class="el-input__inner destination">
                                        </div>
                                    </div>
                                </div>
                                <div class="el-form-item itemRow is-required">
                                    <label class="el-form-item__label" style="width: 145px;">
                                        预估出行日期：
                                    </label>
                                    <div class="el-form-item__content" style="margin-left: 145px;">
                                        <div class="el-date-editor el-range-editor el-input__inner el-date-editor--daterange">
                                            <input type="text" class="layui-input goDate" id="test16" placeholder="开始 - 结束">
                                        </div>
                                    </div>
                                </div>
                                <div class="el-form-item itemRow is-required">
                                    <label class="el-form-item__label" style="width: 145px;">
                                        预估出行人数：
                                    </label>
                                    <div class="el-form-item__content personNumber" style="margin-left: 145px;">
                                        <div>
                                            <div class="el-input-number">
                                                <span role="button" class="el-input-number__decrease adultBut">
                                                    <i class="el-icon-minus">-</i>
                                                </span>
                                                <span role="button" class="el-input-number__increase">
                                                    <i class="el-icon-plus">+</i>
                                                </span>
                                                <div class="el-input">
                                                    <input type="text" value="1" autocomplete="off" max="Infinity"
                                                           class="el-input__inner adult" role="spinbutton"
                                                           aria-valuemax="Infinity">
                                                </div>
                                            </div>
                                            <span class="name">成人</span>
                                        </div>
                                        <div class="number">
                                            <div class="el-input-number">
                                                <span role="button" class="el-input-number__decrease">
                                                    <i class="el-icon-minus">-</i>
                                                </span>
                                                <span role="button" class="el-input-number__increase">
                                                    <i class="el-icon-plus">+</i>
                                                </span>
                                                <div class="el-input">
                                                    <input type="text" value="0" autocomplete="off" max="Infinity"
                                                           class="el-input__inner children" role="spinbutton"
                                                           aria-valuemax="Infinity">
                                                </div>
                                            </div>
                                            <span class="name">儿童
                                            <span class="ageText">12周岁(含)及以下</span></span>
                                        </div>
                                        <div class="number">
                                            <div class="el-input-number">
                                                <span role="button" class="el-input-number__decrease">
                                                    <i class="el-icon-minus">-</i>
                                                </span>
                                                <span role="button" class="el-input-number__increase">
                                                    <i class="el-icon-plus">+</i>
                                                </span>
                                                <div class="el-input">
                                                    <input type="text" value="0" autocomplete="off" max="Infinity"
                                                           class="el-input__inner old" role="spinbutton"
                                                           aria-valuemax="Infinity">
                                                </div>
                                            </div>
                                            <span class="name">老人
                                            <span class="ageText">65周岁(含)及以上</span></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="el-form-item itemRow budget is-required">
                                    <label class="el-form-item__label" style="width: 145px;">
                                        预估人均预算：
                                    </label>
                                    <div class="el-form-item__content" style="margin-left: 145px;">
                                        <div class="el-input">
                                            <input type="text" autocomplete="off"
                                                   placeholder="￥"
                                                   class="el-input__inner min-price">
                                            &nbsp&nbsp-&nbsp&nbsp
                                            <input type="text" autocomplete="off"
                                                   placeholder="￥"
                                                   class="el-input__inner max-price">
                                        </div>
                                    </div>
                                </div>
                                <div class="el-form-item itemRow is-required">
                                    <label class="el-form-item__label" style="width: 145px;">
                                        需要的服务：
                                    </label>
                                    <div class="el-form-item__content" style="margin-left: 145px;">
                                        <div class="el-checkbox-group checkbox">
                                            <span class="el-checkbox-button__inner">机票</span>
                                            <span class="el-checkbox-button__inner">火车票</span>
                                            <span class="el-checkbox-button__inner">酒店</span>
                                            <span class="el-checkbox-button__inner">门票</span>
                                            <span class="el-checkbox-button__inner">包车</span>
                                            <span class="el-checkbox-button__inner">导游</span>
                                            <span class="el-checkbox-button__inner">签证</span>
                                            <span class="el-checkbox-button__inner">保险</span>
                                            <span class="el-checkbox-button__inner">用餐</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="el-form-item itemRow is-required">
                                    <label class="el-form-item__label" style="width: 145px;">其他需求：</label>
                                    <div class="el-form-item__content" style="margin-left: 145px;">
                                        <div class="el-textarea">
                                            <textarea autocomplete="off" maxlength="1000" rows="9"
                                                      placeholder="选填，您可以输入更多个性化需求，例如航班、酒店星级必玩景点等,1000字以内"
                                                      class="el-textarea__inner text" style="min-height: 35px;"></textarea>
                                        </div>
                                    </div>
                                </div>
                                <div class="el-form-item itemRow is-required">
                                    <label class="el-form-item__label" style="width: 145px;">联系人姓名：</label>
                                    <div class="el-form-item__content" style="margin-left: 145px;">
                                        <div class="el-input">
                                            <input type="text" autocomplete="off" placeholder="请输入联系人姓名"
                                                   class="el-input__inner destination myname">
                                        </div>
                                    </div>
                                </div>
                                <div class="el-form-item itemRow is-required">
                                    <label class="el-form-item__label" style="width: 145px;">手机号：</label>
                                    <div class="el-form-item__content" style="margin-left: 145px;">
                                        <div class="el-input">
                                            <input type="text" autocomplete="off" placeholder="请输入手机号"
                                                   class="el-input__inner destination phone">
                                        </div>
                                    </div>
                                </div>
                                <div class="el-form-item">
                                    <div class="el-form-item__content" style="margin-left: 140px;">
                                        <div class="tips">* 为了保证您交易安全与服务质量，请在筋斗云线上交易。筋斗云为您保驾护航，供24小时专属服务，旅行投诉仲裁等服务。
                                            如线下交易导致损失，需要自己承担后果，筋斗云不对任何线下/其他平台交易负责。
                                        </div>
                                    </div>
                                </div>
                                <div class="el-form-item"><!---->
                                    <div class="el-form-item__content" style="margin-left: 140px;">
                                        <div class="button submit">
                                            <div class="site-demo-button" id="layerDemo" style="margin-bottom: 0;">
                                                <div data-method="offset" data-type="auto" class="layui-btn layui-btn-normal transform">提交需求单</div>

                                            </div>
<%--                                            <div class="transform">提交需求单</div>--%>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="right">
                    <div data-v-1a859ea3="" class="orderWrap">
                        <div data-v-1a859ea3="" class="title">我的需求订单</div>
                        <div data-v-1a859ea3="" class="roWrap">
                            <div data-v-1a859ea3="" class="row">
                                <div data-v-1a859ea3="" class="colLeft"> 定制类型:</div>
                                <div data-v-1a859ea3="" class="colRight customOm1"> 私人定制</div>
                            </div>
                            <div data-v-1a859ea3="" class="row">
                                <div data-v-1a859ea3="" class="colLeft"> 出发地:</div>
                                <div data-v-1a859ea3="" class="colRight start1"></div>
                            </div>
                            <div data-v-1a859ea3="" class="row">
                                <div data-v-1a859ea3="" class="colLeft"> 目的地:</div>
                                <div data-v-1a859ea3="" class="colRight destination1"></div>
                            </div>
                            <div data-v-1a859ea3="" class="row">
                                <div data-v-1a859ea3="" class="colLeft"> 预估出行日期:</div>
                                <div data-v-1a859ea3="" class="colRight goDate1"></div>
                            </div>
                            <div data-v-1a859ea3="" class="row">
                                <div data-v-1a859ea3="" class="colLeft"> 预估出行人数:</div>
                                <div data-v-1a859ea3="" class="colRight person"></div>
                            </div>
                            <div data-v-1a859ea3="" class="row">
                                <div data-v-1a859ea3="" class="colLeft"> 预估人均预算:</div>
                                <div data-v-1a859ea3="" class="colRight price"></div>
                            </div>
                            <div data-v-1a859ea3="" class="row">
                                <div data-v-1a859ea3="" class="colLeft"> 需要提供什么:</div>
                                <div data-v-1a859ea3="" class="colRight checkBox"></div>
                            </div>
                            <div data-v-1a859ea3="" class="row">
                                <div data-v-1a859ea3="" class="colLeft"> 其他需求:</div>
                                <div data-v-1a859ea3="" class="colRight text1"></div>
                            </div>
                            <div data-v-1a859ea3="" class="row">
                                <div data-v-1a859ea3="" class="colLeft"> 联系人姓名:</div>
                                <div data-v-1a859ea3="" class="colRight name1"></div>
                            </div>
                            <div data-v-1a859ea3="" class="row">
                                <div data-v-1a859ea3="" class="colLeft"> 手机号:</div>
                                <div data-v-1a859ea3="" class="colRight phone1"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bigTitle">不找攻略，不跟团
                    <div><span class="state">确认方案前不收费</span></div>
                </div>
                <div class="cStep">
                    <div>
                        <div class="stepWrap">
                            <div class="icon step0"></div>
                            <div class="middle">提出需求</div>
                            <div class="bottom">30秒内接单</div>
                        </div>
                        <div class="stepWrap">
                            <div class="icon step1"></div>
                            <div class="middle">确认方案</div>
                            <div class="bottom">无条件定制，满意为止</div>
                        </div>
                    </div>
                    <div>
                        <div class="stepWrap">
                            <div class="icon step2"></div>
                            <div class="middle">方案选择</div>
                            <div class="bottom">精选方案进行选择</div>
                        </div>
                        <div class="stepWrap">
                            <div class="icon step3"></div>
                            <div class="middle">快乐出行</div>
                            <div class="bottom">明白消费，24小时管家跟进</div>
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </div>
</div>


</body>
<script src="${pageContext.request.contextPath}/js/customize/custom.js"></script>
<script>
    layui.use('layer', function(){ //独立版的layer无需执行这一句
        var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句

        //触发事件
        var active = {
            offset: function(othis){
                var type = othis.data('type')
                    ,text = othis.text();

                layer.open({
                    type: 1
                    ,offset: type //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                    ,id: 'layerDemo'+type //防止重复弹出
                    ,content: '<div style="padding: 20px 50px;width: 300px">'+ "尊敬的顾客您好，稍后我们的首席定制师狄开池先生将会联系您，为您量身定制 !"+'</div>'
                    ,btn: '关闭全部'
                    ,btnAlign: 'c' //按钮居中
                    ,shade: 0 //不显示遮罩
                    ,yes: function(){
                        layer.closeAll();
                    }
                });
            }
        };

        $('#layerDemo .layui-btn').on('click', function(){
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });

    });
</script>
</html>
